<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>xsqg</title>
		<link rel="stylesheet" type="text/css" href="../css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../lib/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
		<style type="text/css">
			* {
				font-family: "微软雅黑";
			}
			
			.head {
				height: 50px;
				position: fixed;
				top: 0;
				background-color: #444444;
				color: white;
				width: 100%;
				font-size: 18px;
				line-height: 50px;
				text-indent: 1rem;
			}
			
			.weui-flex {
				width: 100%;
				position: fixed;
				top: 50px;
				text-align: center;
			}
			
			.placeholder {
				border-right: 1px solid #9D9D9D;
				background-color: #444444;
				color: #9D9D9D;
				height: 60px;
			}
			
			.active {
				color: red;
				background-color: yellow;
			}
			#lijiqianggou{
			float: right;
			 background-color: red; 
			 color: white; 
			  width: 70px; 
			  height: 30px; 
			  text-align: center;
			   border: none; 
			   border-radius: 10px;
			}
          .wupengfanhui{
          	font-weight: bold;
          	font-size: 20px;
          }
		</style>
	</head>

	<body>
		<div class="head" style="z-index: 1000;"><span class="iconfont icon-back wupengfanhui" v-on:click="wpfh"></span>      
			限时抢购
		</div>
		<div class="weui-flex" style="z-index: 1000;">
			<div class="weui-flex__item" v-for="item in shijian">
				<div class="placeholder" :class="{active:$index==type}">
					<p v-if="$index!=type"><span v-html="item.time"></span></p>
					<p v-if="$index!=type"><small>已结束</small></p>
					<p v-if="$index==type"><span>距离结束</span></p>
					<p v-if="$index==type"><b><span v-html="hh"></span>:<span v-html="mm"></span>:<span v-html="ss"></span></b></p>
				</div>
			</div>
		</div>
		<p style="height:100px;"></p>
		<div class="weui-panel__bd" onclick="wu_alinck(this)" > 
			<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
				<div class="weui-media-box__hd">
					<img class="weui-media-box__thumb" :src="img" />
				</div>
				<div class="weui-media-box__bd">
					<h4 class="weui-media-box__title" v-html="name"></h4>
					<p class="weui-media-box__desc"><span v-html="price"></span><input id="lijiqianggou" type="button"  value="立即抢购"></p>
				</div>
				
			</a>
			<div class="moregengduo" v-for="item1 in list">
				<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
				<div class="weui-media-box__hd"> 
					<img style="width: 60px; height: 60px; float: left;" class="weui-media-box__thumb" :src="item1.attributes.img" />
				</div>
					<div class="weui-media-box__bd">
					<h4 class="weui-media-box__title" v-html="item1.attributes.name"></h4>
					<p class="weui-media-box__desc"><span v-html="price"></span><input id="lijiqianggou" type="button"  value="立即抢购"></p>
				</div>
				</a>
				</div>
		</div>
		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="//cdn1.lncld.net/static/js/2.1.4/av-min.js"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el: "body",
				data: {
					hh: "",
					mm: "",
					ss: "",
					shijian: [{
						time: "10:00"
					}, {
						time: "14:00"
					}, {
						time: "16:00"
					}, {
						time: "20:00"
					}],
					type: "",
					price:10,
					img: "",
					name: "",
					list:"",
				},
				methods: {
					wpfh:function(){
						history.go(-1);
					},
					panduan: function() {
						var hhh = new Date().getHours();
						if(hhh >= 10 && hhh < 14) {
							this.type = 0;
						}
						if(hhh >= 14 && hhh < 16) {
							this.type = 1;
						}
						if(hhh >= 16 && hhh < 20) {
							this.type = 2;
						}
						if(hhh >= 20 && hhh < 24) {
							this.type = 3;
						}
						if(hhh >= 0 && hhh < 10) {
							this.type = -100;
						}
					},
					daojishi: function() {
						var time = new Date();
						var hh = time.getHours();
						var mm = time.getMinutes();
						var ss = time.getSeconds();
						var e;
						if(hh >= 20 && hh < 24) {
							e = 24;
						};
						if(hh >= 10 && hh < 14) {
							e = 14;
						};
						if(hh >= 14 && hh < 16) {
							e = 16;
						};
						if(hh >= 16 && hh < 20) {
							e = 20;
						};
						h = (((e + 23) - hh) > 23 ? (e + 23) - hh - 24 : (e + 23) - hh) < 10 ? "0" + (((e + 23) - hh) > 23 ? (e + 23) - hh - 24 : (e + 23) - hh) : (((e + 23) - hh) > 23 ? (e + 23) - hh - 24 : (e + 23) - hh);
						m = (59 - mm) < 10 ? "0" + (59 - mm) : (59 - mm);
						s = (59 - ss) < 10 ? "0" + (59 - ss) : (59 - ss);
					},
					geturl: function() {
						url = location.search;
						c_start = url.indexOf(name + "=")
						if(c_start != -1) {
							c_start = c_start + name.length + 1
							c_end = url.indexOf("&", c_start);
							if(c_end == -1) c_end = url.length;
							return unescape(url.substring(c_start, c_end));
						}
						return "";
					}
				},
				created: function() {
					this.panduan();
					setInterval(function() {
						vue.panduan();
						vue.daojishi();
						vue.hh = h;
						vue.mm = m;
						vue.ss = s;
					}, 1000);
					var APP_ID = '9etyUbhi95RBWTaoLBTyW5HP-gzGzoHsz';
					var APP_KEY = '6IkehXVEvUELlpo1SAf1c8PR';
					AV.init({
						appId: APP_ID,
						appKey: APP_KEY
					});
					var mthis = this;
					var query = new AV.Query('Business');
					query.find().then(function(products) {
						for(var i = 0; i < products.length; i++) {
							mthis.list = products;
							if(mthis.geturl() == products[i].id) {
								mthis.img = products[i].attributes.img[0];
								mthis.name = products[i].attributes.name;
							}
						}
					}).catch(function(error) {
						//alert(JSON.stringify(123));
					});
				},

			})

			function wu_alinck(t) {
				location.href = "../Business-details/Business-details.html?index=" +vue.geturl();
			}
		</script>
	</body>

</html>